<template>
	<div class="wrap_common memberData">
		<!-- 数据总览 -->
		<div class="common_module data_total">
			<div class="module_title">
				<div class="module_title_top module_title_flex">
					<div class="module_title_text">数据总览</div>
					<app-filter-tab :data="dataTotalFilter" :filterVal="dataTotalVal"
									@filterBtn="dataTotalFn"></app-filter-tab>
				</div>
				<div class="module_title_bottom">以下数据截止至今天 {{ totalUpDate }}</div>
			</div>
			<div class="module_content">
				<div class="data_total_list" v-for="(item,index) in totalData" :key="index" @click="jumpPageFn(item)">
					<div>
						<span>{{ item.text }}</span>
						<i v-if="item.url" class="iconfont iconjiantou"></i>
					</div>
					<div>
						<span class="strong_text">{{item.data.now}}</span>
					</div>
					<div class="list_info">
						<span v-if="item.data.pass == 0">持平</span>
						<span v-if="item.data.pass != 0">日新增</span>
						<span v-if="item.data.pass != 0" :class="[ item.data.pass < 0 ? 'data_down' : 'data_up' ]">{{ item.data.pass }}</span>
						<img v-if="item.data.pass > 0" :src="`${constant.imgUrl}getguest/up_icon.png`" alt/>
						<img v-if="item.data.pass < 0" :src="`${constant.imgUrl}getguest/down_icon.png`" alt/>
					</div>
				</div>
			</div>
		</div>
		<!-- 客户活跃度 -->
		<div class="common_module member_active">
			<div class="module_title module_title_flex">
				<div class="module_title_text">客户活跃度</div>
				<app-filter-tab :data="memberActiveFilter" :filterVal="memberActiveVal"
								@filterBtn="memberActiveFn"></app-filter-tab>
			</div>
			<div class="module_comtent">
				<!-- uchart -->
				<div class="qiun-charts">
					<canvas canvas-id="canvasArea" id="canvasArea" class="charts" @touchstart="touchArea"></canvas>
				</div>
			</div>
		</div>
		<!-- 客户行为统计 -->
		<div class="common_module">
			<div class="module_title">
				<div class="module_title_text">客户行为统计</div>
			</div>
			<div class="module_comtent">
				<div class="progress_wrap">
					<div class="progress_list" v-if="!item.noShow" v-for="(item, index) in analysisTotal"
						 :key="index">
						<div class="progress_title">
							<span>{{ index + 1 }}&nbsp;&nbsp;</span>
							<span>{{ item.name }}</span>
							<span>-</span>
							<span class="yellow_text">{{ item.num }}</span>
							次
						</div>
						<!-- <van-progress :percentage="item.num" :show-pivot="false" color="#FF6900" /> -->
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import { mapGetters, mapState } from 'vuex'
import AppFilterTab from '@/pages/getGuest/components/AppFilterTab.vue'
import { getFormatDate } from '@/utils/common'
// api
import { getAnalysisData, getActivityData, getAnalysisTotal } from '@/api/getGuest'

// js
import Ucharts from '@/components/u-charts/u-charts.js'
var _self
var canvaArea = null
export default {
	name: 'member-data',
	components: {
		AppFilterTab
	},
	data() {
		return {
			constant: this.$constant,
			// 数据总览筛选数据
			dataTotalVal: 1,
			dataTotalFilter: [
				{
					name: '累计',
					value: 1
				},
				{
					name: '昨天',
					value: 2
				},
				{
					name: '近7天',
					value: 3
				},
				{
					name: '近15天',
					value: 4
				}
			],
			totalUpDate: '',
			totalData: [
				{
					text: '累计浏览（次）',
					data: {
						now: 0
					}
				},
				{
					text: '累计访问量（人）',
					url: '/pages/getGuest/centerAction',
					data: {
						now: 0
					}
				},
				{
					text: '累计转发（次）',
					data: {
						now: 0
					}
				},
				{
					text: '累计客户（人）',
					url: '/pages/order/subscribeOrder',
					data: {
						now: 0
					}
				},
				{
					text: '累计线索（人）',
					url: '/pages/order/subscribeOrder',
					data: {
						now: 0
					}
				}
			],
			// 客户活跃筛选数据
			memberActiveVal: 1,
			memberActiveFilter: [
				{
					name: '近7天',
					value: 1
				},
				{
					name: '近15天',
					value: 2
				}
			],
			// 客户行为统计
			analysisTotal: [
				{
					name: '浏览案例',
					value: 'case_browse',
					num: 0
				},
				{
					name: '浏览文章',
					value: 'article_browse',
					num: 0
				},
				{
					name: '线上报名',
					value: 'online_sign_up',
					num: 0
				},
				{
					name: '总转发量',
					value: 'share_number',
					num: 0
				},
				{
					name: '家居风水',
					value: 'fengshui',
					num: 0
				},
				{
					name: '装修报价',
					value: 'decoration_price',
					num: 0
				},
				{
					name: '保存名片',
					value: 'poster',
					num: 0
				},
				{
					name: '户型设计',
					value: 'apartment_design',
					num: 0
				},
				{
					name: '智能报价',
					value: 'intelligence_price',
					num: 0
				},
				{
					name: '装修红包',
					value: 'renovation_coupon',
					num: 0
				}
			]
		}
	},
	computed: {
		...mapGetters({ userInfo: 'getUser' })
	},
	onLoad() {
		this.init()
	},
	methods: {
		init() {
			_self = this
			this._getAnalysisData()
			this._getActivityData()
			this._getAnalysisTotal()
		},
		// 数据总览
		_getAnalysisData(type) {
			let params = {}
			if (type) {
				params.type = type
			}
			getAnalysisData(params).then(res => {
				if (res.status == 'success') {
					let data = res.data
					this.totalUpDate = getFormatDate(res.time, 'hh:mm:ss')
					this.totalData[0].data = data.count_browse
					this.totalData[1].data = data.count_number
					this.totalData[2].data = data.count_share
					this.totalData[3].data = data.count_user
					this.totalData[4].data = data.count_source
				}
			})
		},
		// === 客户活跃度===
		_getActivityData(type) {
			let params = {}
			if (type) {
				params.type = type
			}
			return getActivityData(params).then(res => {
				if (res.status == 'success') {
					let data = res.data

					let chartData = {
						categories: [...data.date],
						series:[
									{
									name: '访问',
									data: [...data.accessNum],
									color: '#ff6900'
									},
									{
									name: '获客',
									data: [...data.guestNum],
									color: '#4c74e5'
									}
						]
					}
					this.initChart('canvasArea', chartData)
				}
			})
		},
		initChart(canvasId, chartData) {
			let that = this
			let yAxisMax = 10
			for (let i = 0; i < chartData.series.length; i++) {
				let nowData = chartData.series[i]
				let max = Math.max.apply(null, nowData)
				yAxisMax = max > yAxisMax ? max : yAxisMax
			}
			canvaArea = new Ucharts({
				$this: _self,
				canvasId: canvasId,
				type: 'area',
				fontSize: 11,
				background: '#FFFFFF',
				width: uni.upx2px(750),
				height: uni.upx2px(500),
				categories: chartData.categories,
				series: chartData.series,
				animation: true,
				xAxis: {
					disableGrid: true,
					labelCount: 7// 标签数量
				},
				yAxis: {
					disableGrid: true,
					min: 0,
					max: yAxisMax // 终止值
				},
				extra: {
					area: {
						type: 'straight',
						opacity: 0.2,
						addLine: true,
						width: 2
					}
				}
			})
		},
		touchArea(e) {
			canvaArea.showToolTip(e, {
				format: function(item, category) {
					return category + ' ' + item.name + ':' + item.data
				}
			})
		},

		// 客户行为统计
		_getAnalysisTotal() {
			getAnalysisTotal().then(res => {
				if (res.status == 'success') {
					let data = res.data
					for (let i in data) {
						for (let j in this.analysisTotal) {
							if (i == this.analysisTotal[j].value) {
								this.analysisTotal[j].num = data[i] || 0
							}
						}
					}

					if (this.userInfo.role_id == 1 || this.userInfo.role_id == 2) {
						this.analysisTotal[5].noShow = true
						this.analysisTotal[6].noShow = true
					} else {
						this.analysisTotal[7].noShow = true
						this.analysisTotal[8].noShow = true
						this.analysisTotal[9].noShow = true
					}

					this.analysisTotal.sort((a, b) => {
						return b.num - a.num
					})

					// console.log(this.analysisTotal)
				} else {
					this.$toast(res.message)
				}
			})
		},
		// 数据总览筛选
		dataTotalFn(item) {
			this.dataTotalVal = item.value
			this._getAnalysisData(item.value)
		},
		// 数据活跃度筛选
		memberActiveFn(item) {
			this.memberActiveVal = item.value
			this._getActivityData(item.value)
		},
		// 页面跳转
		jumpPageFn(item) {
			if (item.url) {
				let query = {
					owner_user_id: this.userInfo.user_id
				}
				uni.navigateTo({
					url: `${item.url}${this.commonJS.queryData(query)}`
				})
			}
		}
	}
}
</script>
<style lang="scss" scoped>
	.memberData {
		padding-top: 20px;
		// 公共
		.common_module {
			color: $fontColor3;
			background-color: #fff;
			margin-bottom: 20px;

			.module_title {
				padding: 20px 30px;
				border-bottom: 1px solid $borderColorMain; /*no*/
			}

			.module_title_top {
				margin-bottom: 40px;
			}

			.module_title_flex {
				@include direction(center, space-between);
			}

			.module_title_text {
				color: #333;
				font-size: 30px;
				font-weight: 600;
			}
		}

		// 数据总览
		.data_total {
			.module_content {
				@include disFlexCen();
				flex-wrap: wrap;

				.data_total_list {
					width: 33.33%;
					text-align: center;
					padding: 40px 0 30px;
					border-bottom: 0.5px solid $borderColorMain; /*no*/
					& > div {
						margin-bottom: 10px;
					}

					i {
						font-size: 24px;
					}

					.list_info {
						@include direction(center, center);

						& > span {
							margin-right: 8px;
						}

						img {
							width: 16px;
							// height: 18px;
						}
					}
				}

				.data_total_list:nth-child(n + 4) {
					border-bottom: 0 !important;
				}
			}
		}

		/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
		.qiun-charts {
			width: 750upx;
			height: 500upx;
			background-color: #FFFFFF;
		}

		.charts {
			width: 750upx;
			height: 500upx;
			background-color: #FFFFFF;
		}

		// 客户行为统计
		.progress_wrap {
			margin: 0 30px;
			overflow: hidden;
			padding-bottom: 30px;

			.progress_list {
				height: 80px;
				display: flex;
				align-items: center;
				// margin-top: 30px;
				border-bottom: 0.5px solid $borderColorMain; /*no*/
				.progress_title {
					font-size:24px;
					// margin-bottom: 18px;
					color: $fontColor2;
				}

				.yellow_text {
					color: #FF6900;
				}
			}

			// .progress_list:first-child {
			//     margin-top: 0;
			// }
		}

		.data_up {
			color: #ff2a2a;
		}

		.data_down {
			color: #01ac2c;
		}

		.strong_text {
			font-size: 42px;
			font-weight: 600;
			color: #333;
			margin-bottom: 0;
		}

		img {
			width: 100%;
			height: 100%;
		}
	}
</style>

